<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"  href="/elementUI/theme-chalk/index.css">
    <style>
        .contextmenu__item {
            display: block;
            line-height: 34px;
            text-align: center;
        }
        .contextmenu__item:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        .menu {
            position: absolute;
            background-color: #fff;
            width: 100px;
            /*height: 106px;*/
            font-size: 12px;
            color: #444040;
            border-radius: 4px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            white-space: nowrap;
            z-index: 1000;
        }
        .contextmenu__item:hover {
            cursor: pointer;
            background: #66b1ff;
            border-color: #66b1ff;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app">

    <template>
        <el-table :data="workTemplateContents"  border style="width: 100%" @row-click="modifyRow" @row-contextmenu="rightClick">
<!--            <el-table-column prop="id" ></el-table-column>-->
            <el-table-column type="index" label="编号" width="50px"></el-table-column>
            <el-table-column prop="content" label="内容"  ></el-table-column>
            <el-table-column prop="roleName" label="角色" ></el-table-column>
            <el-table-column prop="workload" label="层级"></el-table-column>
            <el-table-column prop="level" label="工作量"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
        </el-table>
    </template>
    <template>
    <el-dialog :visible.sync="dialogFormVisible" width="450px" @closed="closeDialog">
        <el-form  ref="form" :model="workTemplateContent" label-width="90px" style="width: 310px;" >

            <el-form-item label="编号">
                <el-input disabled v-model="workTemplateContent.id"></el-input>
            </el-form-item>

            <el-form-item label="内容">
                <el-input v-model="workTemplateContent.content"></el-input>
            </el-form-item>

            <el-form-item label="角色">
                <el-select filterable  v-model="workTemplateContent.roleId" placeholder="请选择角色" @change="changeRoleName">
                    <el-option v-for="item in roles"
                               :label="item.name"
                               :key="item.id"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="层级">
                <el-select filterable  v-model="workTemplateContent.level" placeholder="请选择层级">
                    <el-option v-for="item in level"
                               :label="item.value"
                               :key="item.key"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="工作量">
                <el-select filterable  v-model="workTemplateContent.workload" placeholder="请选择活工作量">
                    <el-option v-for="item in  workload"
                               :label="item.value"
                               :key="item.value"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="时间">
                <el-select filterable  v-model="workTemplateContent.time" placeholder="请选择时间">
                    <el-option v-for="item in time"
                               :label="item.value"
                               :key="item.value"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">修 改</el-button>
        </div>
    </el-dialog>
    </template>
    <template>
        <el-dialog :visible.sync="inputFormVisible" width="450px"  @closed="closeDialog">
            <el-form  ref="form" :model="workTemplateContent" label-width="90px" style="width: 310px;" >

                <el-form-item label="编号">
                    <el-input disabled v-model="workTemplateContent.id"></el-input>
                </el-form-item>

                <el-form-item label="内容">
                    <el-input v-model="workTemplateContent.content"></el-input>
                </el-form-item>

                <el-form-item label="角色">
                    <el-select filterable  v-model="workTemplateContent.roleId" placeholder="请选择角色" @change="changeRoleName">
                        <el-option v-for="item in roles"
                                   :label="item.name"
                                   :key="item.id"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="层级">
                    <el-select filterable  v-model="workTemplateContent.level" placeholder="请选择层级">
                        <el-option v-for="item in level"
                                   :label="item.value"
                                   :key="item.key"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="工作量">
                    <el-select filterable  v-model="workTemplateContent.workload" placeholder="请选择活工作量">
                        <el-option v-for="item in  workload"
                                   :label="item.value"
                                   :key="item.value"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="时间">
                    <el-select filterable  v-model="workTemplateContent.time" placeholder="请选择时间">
                        <el-option v-for="item in time"
                                   :label="item.value"
                                   :key="item.value"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="inputFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="inputThisRow">添 加</el-button>
            </div>
        </el-dialog>
    </template>
    <template>
        <div id="contextmenu"
             v-show="menuVisible"
             class="menu">
            <div class="contextmenu__item"
                 @click="modifyRow(CurrentRow)">查 看</div>
            <div class="contextmenu__item"
                 @click="inputRow(CurrentRow)">添 加</div>
        </div>
    </template>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementUI/index.js"></script>
<script src="/vue/axios.js"></script>
<script>
    var href = window.location.href;
    var id = href.substring(href.indexOf("id=")+3, href.length)
    const app =  new Vue({
        el: '#app',
        data: {
            menuVisible: false,//右键菜单是否显示
            CurrentRow:'',//保存当前右键的行信息
            dialogFormVisible: false,//修改信息弹框是否显示
            inputFormVisible: false,//添加信息弹框是否显示
            roles:[],
            workload:[],
            level:[],
            time:[],
            workTemplateContents: [],
            curRow:{},
            workTemplateContent:{
                content: '',
                id: '',
                level: '',
                remark: '',
                roleId: '',
                roleName: '',
                time: '',
                workTemplateId: '',
                workload: '',
            }
        },
        methods: {
            modifyRow(row){
                this.dialogFormVisible =true;
                this.menuVisible = false;
                this.curRow = row;
                this.workTemplateContent.content = row.content;
                this.workTemplateContent.index = row.index;
                this.workTemplateContent.id = row.id;
                this.workTemplateContent.level = row.level;
                this.workTemplateContent.remark = row.remark;
                this.workTemplateContent.roleId = row.roleId;
                this.workTemplateContent.time = row.time;
                this.workTemplateContent.workTemplateId = row.workTemplateId;
                this.workTemplateContent.workload = row.workload;
                this.workTemplateContent.roleName = row.roleName;

            },
            onSubmit() {
                axios.post(
                    '/work-template/updateTemplateContent',
                    this.workTemplateContent
                ).then(res => { if (res.data == 0){
                    this.$message('修改成功');
                    this.closeDialog();
                }} )
                var endurance = this.curRow;//this.workTemplateContents[this.workTemplateContent.index-1]
                endurance.content = this.workTemplateContent.content
                endurance.id =  this.workTemplateContent.id
                endurance.level =  this.workTemplateContent.level
                endurance.remark = this.workTemplateContent.remark
                endurance.roleId = this.workTemplateContent.roleId
                endurance.time =  this.workTemplateContent.time
                endurance.workTemplateId =this.workTemplateContent.workTemplateId
                endurance.workload =this.workTemplateContent.workload
                endurance.roleName =this.workTemplateContent.roleName

            },

            rightClick(row, column, event) {
                this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
                this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
                event.preventDefault(); //关闭浏览器右键默认事件
                this.CurrentRow = row;
                var menu = document.querySelector('.menu')
                this.styleMenu(menu)
            },
            foo() {
                // 取消鼠标监听事件 菜单栏
                this.menuVisible = false;
                document.removeEventListener('click', this.foo) // 关掉监听，
            },
            styleMenu(menu) {
                //判断右键菜单出现位置
                var e = event || window.event;
                var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;
                var scrolly= document.documentElement.scrollTop || document.body.scrollTop;
                var x = e.pageX || e.clientX + scrollx;
                var y = e.pageY || e.clientY + scrolly;
                menu.style.left = x +  'px'
                menu.style.top = y+ 'px'
            },
            inputRow(){
                this.inputFormVisible = true;
                this.menuVisible = false;
                this.workTemplateContent.id = this.workTemplateContents.length+1
            },
            inputThisRow(){
                this.workTemplateContent.workTemplateId=id
                axios.post(
                    '/work-template/insertTemplateContent',
                    this.workTemplateContent
                ).then(res => {
                    if (res.data == 0) {
                        var temp = JSON.parse(JSON.stringify(this.workTemplateContent));
                        this.workTemplateContents.push(temp);
                        this.inputFormVisible = false;
                        this.closeDialog()
                }} )
            },
            closeDialog(){
                this.inputFormVisible = false;
                this.dialogFormVisible = false;
                this.workTemplateContent.content = ''
                this.workTemplateContent.id = ''
                this.workTemplateContent.level = ''
                this.workTemplateContent.remark = ''
                this.workTemplateContent.roleId = ''
                this.workTemplateContent.time = ''
                this.workTemplateContent.workTemplateId = ''
                this.workTemplateContent.workload = ''
                this.workTemplateContent.roleName = ''
            },
            changeRoleName(id){
                this.workTemplateContent.roleName = this.roles[id-1].name
            }
        },
        created(){

            axios.get(
                '/work-template/getWorkTemplateContents',
                {
                    params: {'id': id}
                }
            ).then(res => {
                this.workTemplateContents = res.data;
            } )
            axios.get(
                '/work-template/getLevel',
            ).then(res => { this.level = res.data; } )
            axios.get(
                '/work-template/getWorkload',
            ).then(res => { this.workload = res.data; } )
            axios.get(
                '/work-template/getRoles',
            ).then(res => { this.roles = res.data; } )
            axios.get(
                '/work-template/getTime',
            ).then(res => { this.time = res.data; } )
        }
    })
</script>
</html>